import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import { Box, Typography, Button } from '@mui/material';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

// 示例数据
const heroGames = [
  {
    id: 1,
    title: '赛博朋克 2077',
    description: '在未来世界中展开的开放世界动作冒险游戏',
    imageUrl: 'https://via.placeholder.com/1920x600',
  },
  {
    id: 2,
    title: '艾尔登法环',
    description: '广阔的开放世界和史诗般的动作RPG',
    imageUrl: 'https://via.placeholder.com/1920x600',
  },
  {
    id: 3,
    title: '死亡搁浅',
    description: '横跨废墟美国的史诗级快递任务',
    imageUrl: 'https://via.placeholder.com/1920x600',
  },
];

const HeroCarousel = () => {
  return (
    <Box sx={{ height: { xs: 300, md: 600 }, position: 'relative' }}>
      <Swiper
        modules={[Navigation, Pagination, Autoplay]}
        navigation
        pagination={{ clickable: true }}
        autoplay={{
          delay: 5000,
          disableOnInteraction: false,
        }}
        loop
        style={{ height: '100%' }}
      >
        {heroGames.map((game) => (
          <SwiperSlide key={game.id}>
            <Box
              sx={{
                height: '100%',
                position: 'relative',
                '&::before': {
                  content: '""',
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  right: 0,
                  bottom: 0,
                  background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)',
                  zIndex: 1,
                },
              }}
            >
              <Box
                component="img"
                src={game.imageUrl}
                alt={game.title}
                sx={{
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover',
                }}
              />
              <Box
                sx={{
                  position: 'absolute',
                  bottom: '10%',
                  left: '5%',
                  zIndex: 2,
                  color: 'white',
                }}
              >
                <Typography variant="h4" component="h2" gutterBottom>
                  {game.title}
                </Typography>
                <Typography variant="body1" paragraph>
                  {game.description}
                </Typography>
                <Button variant="contained" color="primary">
                  了解更多
                </Button>
              </Box>
            </Box>
          </SwiperSlide>
        ))}
      </Swiper>
    </Box>
  );
};

export default HeroCarousel;
